<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
		  -webkit-touch-callout: none;
		  -webkit-text-size-adjust: none;
		  -webkit-tap-highlight-color: rgba(0,0,0,0);
		  -webkit-user-select: none;
		}
		body {
		    background: #FFF;
		    color: #000;
		    margin: 5px;
		    padding: 0px;
		    margin-bottom: 45px;
		    text-align: center;
		    font-family: Helvetica, Arial;
		}
		.container {
		    position: relative;
		    display: inline-block;
		    width: 533px;
		    height: 380px;
		}
		#robot {
		    position: absolute;
		    top: 0px;
		    left: 0px;
		    z-index: 1;
		    -webkit-box-shadow: 0px 0px 20px 0px #707070;
		    -moz-box-shadow: 0px 0px 20px 0px #707070;
		    box-shadow: 0px 0px 20px 0px #707070;
		}
		#redux {
		    position: absolute;
		    top: 0px;
		    left: 0px;
		    z-index: 2;
		}
	</style>
</head>
<body>

	<span class="container">
	    <img id="robot" src="../img/Tesla.jpg" />		<!-- 在下边的图片 -->
	    <img id="redux" src="../img/Tesla2.jpg" />		<!-- 在上边遮罩的图片 -->
	</span>
	
	
	<script src="../lib/jquery.min.js"></script>		
	<script src="../lib/jquery.eraser.js"></script>
	<script>

		/**
		 * size    清除面积默认是40
		 * reset   重置画布
		 * clear   清除所有画布
		 */
		
	
	    $("#redux").eraser({
	    	size : 50,
	    	completeRatio : 0.8,				//设置比例
	    	completeFunction : function() {		//达到比例要完成的函数
	    		$('#redux').fadeOut(1000);
	    	},
	    	progressFunction : function(p) {	//擦除的比例
	    		console.log(Math.round(p * 100) + '%');
	    	}
	    });

		
	</script>
</body>
</html>